<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<style>
			div {
				width: 200px;
				height: 150px;
				background-color: red;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
		<!-- 导入jQuery本体 -->
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
		<!-- 导入jQuery-color库,提供动态颜色支持 -->
		<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery-color/2.1.2/jquery.color.min.js"></script>
		
		<script>
			$(function() {
				//$()把JS对象转换成jQuery对象,然后才可以调用jQuery函数,并且几乎所有的jQuery函数返回类型都是jQuery对象本身,
				//所以jQuery可以链式调用
				$("div").animate({
					left: "800px",
					//注意: jQuery本身是无法动态改变颜色的,需要提供额外的组件库才能实现
					backgroundColor:"green"
				}, 3000).animate({
					top: "400px",
					backgroundColor:"blue"
				}, 3000).animate({
					left: "0px",
					backgroundColor:"yellow"
				}, 3000).animate({
					top: "0px",
					backgroundColor:"red"
				}, 3000);
				
				//鼠标移入事件
				$("div").mouseover(function(){
					//this表示当前对象,它是JS对象,所以需要通过$()来转换成jQuery对象
					$(this).stop();
				});
			});
		</script>
	</head>
	<body>
		<div></div>
	</body>
</html>
